<template>
  <div class="login-mode">
    <el-row>
      <el-col :span="24">
        <p class="account-login">帐号登录</p>
      </el-col>

      <!-- 修改密码弹出框 -->
      <el-dialog id="modifyDialog"
                 width="40%"
                 title="修改密码"
                 :before-close="handleClose"
                 :visible.sync="dialogFormVisible"
                 :modal-append-to-body="true">
        <ModifyPasswordDialog :todos="todos"
                              :catchBack="catchBack"
                              :catchSave="catchSave"></ModifyPasswordDialog>
      </el-dialog>

      <el-form :model="userInfo"
               :inline="true">
        <el-col :span="24"
                class="col-24">
          <el-col :span="12"
                  id="useStyle">
            <el-form-item class="user-style"
                          label="用户名"
                          prop="user_name"
                          label-width="68px">
              <el-input v-model="userInfo.user_name"
                        :disabled="true"
                        class="common-style"></el-input>
            </el-form-item>
            <!-- <el-form-item label="权限模板"
                          prop="usertype"
                          label-width="68px"
                          class="common-style">
              <el-input v-model="form.usertype"
                        :disabled="true"
                        class="common-style"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称"
                          prop="usernickname"
                          label-width="68px"
                          class="common-style">
              <el-input v-model="form.usernickname"
                        :disabled="true"
                        class="common-style"></el-input>
            </el-form-item> -->
            <el-form-item class="login-password"
                          label="登录密码"
                          prop="password"
                          label-width="68px">
              <el-input v-model="userInfo.password"
                        type="password"
                        :disabled="true">
                <el-button slot="append"
                           icon="el-icon-edit"
                           @click="onModify"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { personalCenterApi } from '@/services/PersonalCenter'
import ModifyPasswordDialog from './components/modifyPasswordDialog';
export default {
  components: {
    ModifyPasswordDialog
  },
  data () {
    return {
      todos: 0,
      uuid: this.$route.query.uuid,
      form: {
        username: '',
        usertype: '',
        usernickname: '',
        loginpassword: ''
      },
      dialogFormVisible: false,
      // 用户信息
      userInfo: {}
    }
  },
  methods: {
    //修改密码关闭前执行的操作
    handleClose (done) {
      this.todos = 0;
      done();
    },
    //取消
    catchBack (val) {
      if (val == 'SUCCESS') {
        this.todos = 0;
        this.dialogFormVisible = false;
      }
    },
    //保存
    catchSave (val) {
      if (val == 'SUCCESS') {
        this.todos = 0;
        this.dialogFormVisible = false;
        this.$router.push({
          path: '/login'
        })
      }
    },
    // 修改密码
    onModify () {
      this.todos = 1;
      this.dialogFormVisible = true;
    },
    // 获取用户信息--->登录方式
    getModelInfo () {
      personalCenterApi.getLoginModeUserInfo({
        params: {
          uuid: this.uuid
        }
      }).then((res) => {
        this.form.username = res.data.username
        this.form.usertype = res.data.user_type
        this.form.usernickname = res.data.nickname
        this.form.loginpassword = res.data.password
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    let userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
    this.userInfo = userInfo;
    this.userInfo.password = '*********';
  },
  mounted () {
  }
}
</script>
  <style lang="scss"  scoped>
.col-24 {
  margin-top: 20px;
}

.common-style {
  width: 100% !important;
}
.account-login {
  font-size: 18px;
  font-family: SimSun;
  font-weight: 400;
  color: rgba(20, 65, 179, 1);
}
.login-mode {
  height: 100vh;
  /deep/ .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 80% !important;
  }
  padding: 0 20px;
}
#modifyDialog {
  /deep/ .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
  /deep/ .el-dialog__body {
    padding: 20px 20px;
    color: #606266;
    font-size: 14px;
    padding-bottom: 0px;
  }
}
.user-style {
  width: 100% !important;
  /deep/ .el-form-item__label {
    text-align: right !important;
    float: left;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #333 !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    margin-top: 0px !important;
  }
}

.login-password {
  width: 100% !important;
  .el-input-group__append button.el-button,
  .el-input-group__append div.el-select .el-input__inner,
  .el-input-group__append div.el-select:hover .el-input__inner,
  .el-input-group__prepend button.el-button,
  .el-input-group__prepend div.el-select .el-input__inner,
  .el-input-group__prepend div.el-select:hover .el-input__inner {
    border-color: transparent;
    background-color: white !important;
    color: #1890ff;
    border-top: 0;
    border-bottom: 0;
  }
  .el-input-group__append button.el-button:hover {
    border: 1px solid #1890ff !important;
  }
}
#uploadStyle {
  .el-upload__tip {
    font-size: 12px;
    color: #606266;
    margin-top: -10px;
  }
}
#useStyle {
  /deep/ .el-form-item__label {
    text-align: left;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0px !important;
  }
}
.login-mode {
  padding: 20px;
  .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 83% !important;
  }
}
</style>